<template>
  <view class="query-box">
    <tm-sheet style="border-radius: 2px">
      <tm-text :font-size="24" _class="text-weight-b" label="请输入你的身高体重"></tm-text>
      <tm-divider></tm-divider>
      <tm-input prefix="tmicon-ios-man" placeholder="身高/cm" v-model="height" suffixLabel="身高/cm"/>
      <tm-input prefix="tmicon-ios-battery-full" placeholder="体重/kg" v-model="weight" suffixLabel="体重/kg"/>
      <view class="flex flex-row flex-row-center flex-col-center-center flex-1" style="margin-top: 5px">
        <tm-button :round="2" label="计算" :font-size="24" :width="1600" :height="60" @click="search"></tm-button>
      </view>
    </tm-sheet>

    <tm-sheet style="border-radius: 2px">
      <tm-text :font-size="24" _class="text-weight-b" label="计算结果"></tm-text>
      <tm-divider></tm-divider>

      <tm-divider></tm-divider>
      <tm-descriptions :label-width="100" :width="686" :column="1" transprent :round="1" text title="">
        <tm-descriptions-item :font-size="24" color="red" label="测试结果" :value="result"/>
        <tm-descriptions-item :font-size="24" color="red" label="理想体重" :value="idealWeight"/>
        <tm-descriptions-item :font-size="24" color="red" label="BMI" :value="bmi"/>
      </tm-descriptions>
    </tm-sheet>
  </view>
  <view>

  </view>
</template>

<script>
import {ipQuery} from "@/api/roll";

export default {
  data() {
    return {
      height: null,
      weight: null,
      result: '',
      idealWeight: '',
      bmi: '',
    }
  },
  methods: {
    search(e) {
      // 生成一个计算bmi的 要包含 测试结果（文本描述，例如亲，您的体重过重要减肥了），理想体重 ，BMI
      if (this.height && this.weight) {
        const weight = parseFloat(this.weight);
        let height = parseFloat(this.height);

        // [身高(cm)-100]×0.9 平田公式
        const ideal_weight = (height - 100) * 0.9
        height = height / 100; // convert cm to meter
        console.log('height', height)
        const bmi = (weight / (height * height)).toFixed(2);

        this.bmi = bmi
        this.idealWeight = ideal_weight

        if (bmi < 18.5) {
          this.result = "亲，您的体重过轻了，需要多吃一些哦~";
        } else if (bmi >= 18.5 && bmi < 25) {
          this.result = "亲，您的体重正常，继续保持这样的生活习惯哦~";
        } else if (bmi >= 25 && bmi < 28) {
          this.result = "亲，您的体重过重了，要减肥了哦~";
        } else if (bmi >= 28) {
          this.result = "亲，您的体重属于肥胖，需要注意饮食和锻炼，控制体重哦~";
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
<style lang="scss">
page {
  background-color: #F7F7F7 !important;
}
</style>
